<template>
    <div class="new-user">
        <CuSerTop :Tab="tab"></CuSerTop>
        <div class="client">
            <van-cell is-link @click="showPopup">客户名称</van-cell>
        </div>

        <div class="reason">
            <van-field is-link readonly label="拜访原因" @click="show = true" />
            <van-popup v-model="show" round position="bottom">
                <van-picker
                    show-toolbar
                    :columns="list"
                    @confirm="onFinish"
                    @cancel="show = false"
                />
            </van-popup>
        </div>
        <div class="title">
            <van-cell-group>
                <van-field v-model="value" label="拜访标题" />
            </van-cell-group>
        </div>
        <div class="time">
            <van-field is-link readonly label="拜访时间" @click="timeshow = true" />
            <van-popup v-model="timeshow" round position="bottom">
                <van-datetime-picker
                    v-model="currentDate"
                    type="date"
                    :min-date="minDate"
                    :max-date="maxDate"
                    @confirm="onTime"
                />
            </van-popup>
        </div>

        <div class="text-box">
            <van-field
                v-model="address"
                rows="2"
                autosize
                label="拜访地址"
                type="textarea"
                boder="true"
                size="large"
                placeholder="请输入"
            />
        </div>
        <div class="text-box">
            <van-field
                v-model="condition"
                rows="2"
                autosize
                label="拜访情况"
                type="textarea"
                boder="true"
                size="large"
                placeholder="请输入"
            />
        </div>
        <div class="text-box">
            <van-field
                v-model="message"
                rows="2"
                autosize
                label="竞争信息收集情况"
                type="textarea"
                boder="true"
                size="large"
                placeholder="请输入"
            />
        </div>
        <div class="Tail">
            <van-button>保存</van-button>
        </div>
    </div>
</template>
 
<script>
import CuSerTop from '@/components/CareUser/CareUserTop'
import Vue from 'vue';
//联级标签
import { Cascader } from 'vant';
Vue.use(Cascader);
//下拉列表
import { Picker } from 'vant';
Vue.use(Picker);
//下拉列表时间
import { DatetimePicker } from 'vant';
Vue.use(DatetimePicker);
//输入框
import { Field } from 'vant';
Vue.use(Field);
//按钮
import { Button } from 'vant';
Vue.use(Button);
//客户名称
import { Popup } from 'vant';
Vue.use(Popup);
export default {
    components: {
        CuSerTop
    },
    methods: {
        onFinish(value) {
            console.log(value);
            this.show = false;
        },
        onTime(value) {
            this.timeshow = false;
            console.log(value);
        },
        //跳转到用户列表
        showPopup() {
            this.$router.push('/userlist');
        },

    },
    data() {
        return {
            //头部
            tab: { title: '新增拜访记录', righttext: <van-icon name="wap-home" />, path: '/homes' },
            //拜访原因列表
            list: ['例行走访', '售中支持', '售后支持', '售前支持', '定期回访'],
            //拜访原因显示隐藏
            show: false,
            reasonValue: '',

            //拜访时间显示隐藏
            timeshow: false,
            minDate: new Date(2020, 0, 1),
            maxDate: new Date(2025, 10, 1),
            currentDate: new Date(2021, 0, 17),

            //拜访地址
            address: '',
            //拜访情况
            condition: '',
            //竞争信息收集
            message: ''

        }
    }
}
</script>
 
<style lang = "less" scoped>
.new-user {
    height: 100vh;
    background: #f5f5f5;
    //客户名称
    /deep/.client {
        margin: 20px 0;
        .van-cell {
            align-items: center;
            padding: 20px 20px;
        }
    }
    //拜访原因
    /deep/.reason {
        border-bottom: 1px solid #ccc;
        .van-cell {
            align-items: center;
            padding: 20px 20px;
            .van-cell__title {
                width: auto;
            }
        }
    }
    //拜访标题
    /deep/.title {
        border-bottom: 1px solid #ccc;
        .van-cell {
            align-items: center;
            padding: 20px 20px;
            .van-cell__title {
                width: auto;
            }
        }
    }
    //拜访时间
    /deep/.time {
        border-bottom: 1px solid #ccc;
        .van-cell {
            align-items: center;
            padding: 20px 20px;
            .van-cell__title {
                width: auto;
            }
        }
    }
    //拜访地址
    /deep/.text-box {
        margin: 20px 0;
        .van-cell {
            padding: 20px 20px;
            height: 200px;
            background: white;
        }
    }
    /deep/.Tail {
        position: fixed;
        bottom: 0;
        width: 100%;
        background: white;
        .van-button {
            margin: 20px 0;
            padding: 30px 0;
            border-radius: 30px;
            width: 100%;
            background: skyblue;
            color: white;
        }
    }
}
</style>